<template>
  <div class="app-container">
    <div class="title-flex">
      <div>专家列表</div>
      <div>
        <el-button-group class="ml-4">
          <el-button type="primary" @click="openZJFZ = true"> 专家分组</el-button>
          <el-button type="primary" @click="addxiaowaizhuanjia();resetForm(ruleFormRef)">新增校外专家</el-button>
          <el-button type="primary" @click="deleteList"> 删除</el-button>
          <el-button type="primary" @click="openpeople"> 遴选校内专家</el-button>
          <el-button type="primary" @click="ExportBtn()"> 导出</el-button>
        </el-button-group>
      </div>
    </div>
    <div>
      <zjrcTable ref="deleteChildList"></zjrcTable>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="新增校外专家" width="70%">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
      <div class="dialog-flex">
        <div>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="职称" prop="titleId">
            <el-select
                @focus="getzhichengOptions"
                value-key="value"
                v-model="ruleForm.titleId"
                placeholder="请选择职称"
            >
              <el-option
                  v-for="item in zhichengOptions"
                  :key="item.codeColumn"
                  :label="item.valueColumn"
                  :value="item.codeColumn"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工作单位" prop="workUnit" >
            <el-input v-model="ruleForm.workUnit" autocomplete="off"  placeholder="请输入工作单位"/>
          </el-form-item>
          <el-form-item label="统计归属" prop="subjectClassId">
            <el-radio-group v-model="ruleForm.subjectClassId" @change="GetsubjectClassId">
              <el-radio label="科技类" value="2"/>
              <el-radio label="社科类" value="1"/>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="一级学科" prop="subjectId" >
            <el-select
                v-model="ruleForm.subjectId"
                placeholder="请选择一级学科"
                @focus="getyijixuekeOptions(1)"
            >
              <el-option
                  v-for="item in yijixuekeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker
                v-model="ruleForm.birthday"
                type="date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                aria-label="选择时间"
                placeholder="选择时间"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile" autocomplete="off" />
            <span>用于系统登录，默认密码123456</span>
          </el-form-item>
          <el-form-item label="办公电话" prop="telOffice">
            <el-input v-model="ruleForm.telOffice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="ruleForm.email" autocomplete="off" />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="性别" prop="sexId">
            <el-radio-group v-model="ruleForm.sexId">
              <el-radio label="男" value="1" />
              <el-radio label="女" value="0" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="最后学位" prop="eduDegree">
            <el-radio-group v-model="ruleForm.eduDegree">
              <el-radio label="博士" value="2" />
              <el-radio label="硕士" value="3" />
              <el-radio label="学士" value="4" />
              <el-radio label="无" value="999" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="最后学历" prop="eduLevel">
            <el-radio-group v-model="ruleForm.eduLevel">
              <el-radio label="博士研究生" value="0" />
              <el-radio label="硕士研究生" value="1" />
              <el-radio label="本科" value="2" />
              <el-radio label="大专" value="3" />
              <el-radio label="中专" value="4" />
              <el-radio label="其他" value="5" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="荣誉称号">
            <el-checkbox-group v-model="ruleForm.honorTitleId">
              <el-checkbox label="院士" value="1" name="type" />
              <el-checkbox label="突出青年" value="2" name="type" />
              <el-checkbox label="长江学者" value="3" name="type" />
              <el-checkbox label="其他" value="4" name="type" />
            </el-checkbox-group>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-form-item label="研究方向">
          <el-input v-model="ruleForm.researchField" type="textarea" />
        </el-form-item>
      </div>
      <div style="text-align: center">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button style="text-align: center;" @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button style="text-align: center;" @click="dialogFormVisible = false">
          关闭
        </el-button>
      </div>
    </el-form>
  </el-dialog>
  <el-dialog v-model="openZJFZ" title="专家分组" width="70%">
    <zjfzTable></zjfzTable>
  </el-dialog>
  <el-dialog v-model="openpeopleVisible" title="遴选校内专家" width="70%">
    <el-form
        :model="form"
        ref="formRef"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
      <div class="dialog-flex">
        <div>
          <el-form-item label-width="120px" label="所属单位">
            <el-select
                @focus="getsuoshudanweiOptions"
                value-key="value"
                v-model="form.unitId"
                placeholder="请选择所属单位"
            >
              <el-option
                  v-for="item in suoshudanweiOptions"
                  :key="item.codeColumn"
                  :label="item.valueColumn"
                  :value="item.codeColumn"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="120px" label="姓名">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label-width="120px" label="职称">
            <el-select
                @focus="getzhichengOptions"
                value-key="value"
                v-model="form.titleId"
                placeholder="请选择职称"
            >
              <el-option
                  v-for="item in zhichengOptions"
                  :key="item.codeColumn"
                  :label="item.valueColumn"
                  :value="item.codeColumn"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="120px" label="一级学科" prop="searchId">
            <el-select
                v-model="form.searchId"
                placeholder="请选择一级学科"
                @focus="getyijixuekeOptions"
            >
              <el-option
                  v-for="item in yijixuekeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label-width="120px" label="最后学位">
            <el-radio-group v-model="form.eduDegreeId">
              <el-radio label="全部" value="" />
              <el-radio label="博士" value="2" />
              <el-radio label="硕士" value="3" />
              <el-radio label="学士" value="4" />
              <el-radio label="无" value="999" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label-width="120px" label="硕导/博导">
            <el-radio-group v-model="form.tutorTypeId">
              <el-radio label="全部" value="" />
              <el-radio label="博导" value="1" />
              <el-radio label="硕导" value="2" />
              <el-radio label="非导师" value="3" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label-width="120px" label="性别">
            <el-radio-group v-model="form.sexId">
              <el-radio label="全部" value="" />
              <el-radio label="男" value="1" />
              <el-radio label="女" value="0" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label-width="120px" label="研究方向">
            <el-input v-model="form.researchField" type="textarea" />
          </el-form-item>
        </div>
      </div>
      <el-form-item>
        <el-button style="margin: auto" type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="edit_fei">
      <el-transfer
          :titles="['可选人员', '已有专家']"
          v-model="value"
          :props="{ key: 'id', label: 'name' }"
          :data="data"
          style="margin-left: 50px"
          @change="handleChange"
      />
    </div>
    <div style="text-align: center">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button @click="openpeopleVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { DrawerProps, ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
  insertExpertList,
  deletExpert,
  getPersonHaveList,
  insertSchoolExpertList
} from "@/api/researcherNavApi/zjrcApi";
import { getCategory } from "@/api/researcherNavApi/researcherNavApi";
import zjrcTable from "./zjrcTable.vue";
import zjfzTable from "./../zjfz/zjfzindex.vue";
import { reactive, ref } from "vue";

// 专家分组对话框显示状态
const openZJFZ = ref(false);

// 导出数据
const ExportBtn = function () {
  deleteChildList.value.Export();
};

// 重置表单
const reset = () => {
  for (const key in ruleForm) {
    if (Array.isArray(ruleForm[key])) {
      ruleForm[key] = [];
    } else {
      ruleForm[key] = "";
    }
  }
  ruleForm.honorTitleId = [];
};

// 遴选校内专家对话框显示状态
const openpeopleVisible = ref(false);

// 遴选校内专家表单数据
const form = reactive({
  name: "",
  titleId: "",
  subjectId: "",
  eduDegreeId: "",
  sexId: "",
  unitId: "",
  researchField: "",
  tutorTypeId: ""
});

// 穿梭框数据
const data = ref([]);
const value = ref([]);

// 打开遴选校内专家对话框
const openpeople = function () {
  openpeopleVisible.value = true;
  Object.keys(form).forEach(key => {
    form[key] = "";
  });
  data.value = [];
  value.value = [];
};

// 提交遴选校内专家表单
const onSubmit = () => {
  getPersonHaveList(form).then(res => {
    console.log(res);
    data.value = res.data;
  });
};

// 穿梭框选中数据
const selectedOptions = ref([]);

// 穿梭框选项变化处理
const handleChange = function (newVal, direction, movedKeys) {
  selectedOptions.value = data.value.filter(item => newVal.includes(item.id));
  console.log("选中的", selectedOptions.value);
};

// 保存遴选校内专家结果
const save = function () {
  if (value.value.length < 1) {
    ElMessage({
      type: "warning",
      message: "您还未选择专家，请选择专家。"
    });
  } else {
    insertSchoolExpertList({ schoolExpertList: selectedOptions.value }).then(
        res => {
          if (res.code === 200) {
            ElMessage({
              type: "success",
              message: res.data
            });
          } else {
            ElMessage({
              type: "info",
              message: res.msg
            });
          }
          openpeopleVisible.value = false;
          deleteChildList.value.fathergeilist();
        }
    );
  }
};

// 获取所属单位选项
const suoshudanweiOptions = ref([]);
const getsuoshudanweiOptions = function () {
  getCategory({
    bizName: "成果归属单位"
  }).then(res => {
    suoshudanweiOptions.value = res.data;
  });
};
const  GetsubjectClassId = function (){
  ruleForm.subjectId = ''
}
// 获取一级学科选项
const yijixuekeOptions = ref([]);
const getyijixuekeOptions = function (key) {
  if(key == 1){
    getCategory({
      valueCascade: ruleForm.subjectClassId,
      bizName: "一级学科"
    }).then(res => {
      yijixuekeOptions.value = res.data;
    });
  }else {
    getCategory({
      bizName: "一级学科"
    }).then(res => {
      yijixuekeOptions.value = res.data;
    });
  }
};

// 获取职称选项
const zhichengOptions = ref([]);
const getzhichengOptions = function () {
  getCategory({
    bizName: "职称单选"
  }).then(res => {
    zhichengOptions.value = res.data;
  });
};

// 批量删除
const deleteChildList = ref<any>();
const deleteList = function () {
  deleteChildList.value.open();
};

// 新增校外专家对话框显示状态
const dialogFormVisible = ref(false);

// 打开新增校外专家对话框
const addxiaowaizhuanjia = function () {
  dialogFormVisible.value = true;
  reset();
};

// 表单大小
const formSize = ref("default");

// 新增校外专家表单引用
const ruleFormRef = ref<FormInstance>();
// interface ruleForm {
//   name: string
//   agerName: string
//   subjectClassId: string
// }
// 新增校外专家表单数据
const ruleForm = reactive({
  name: "",
  titleId: "",
  workUnit: "",
  subjectId: "",
  birthday: "",
  mobile: "",
  telOffice: "",
  email: "",
  sexId: "",
  eduDegree: "",
  subjectClassId:'2',
  eduLevel: "",
  honorTitleId: [],
  researchField: "",
  expertSource: "0"
});

// 表单验证规则
const rules = reactive({
  name: [
    { required: true, message: "请填写姓名", trigger: "blur" }
  ],
  sexId: [
    { required: true, message: "请选择性别", trigger: "change" }
  ],
  titleId: [
    { required: true, message: "请选择职称", trigger: "change" }
  ],
  birthday: [
    { type: "date", required: true, message: "请选择出生年月", trigger: "change" }
  ],
  workUnit: [
    { required: true, message: "请输入工作单位", trigger: "blur" }
  ],
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur"
    }
  ],
  email: [
    { required: true, message: "请输入电子邮件", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: "请输入正确的电子邮箱地址",
      trigger: "blur"
    }
  ],
  telOffice: [
    { required: true, message: "请输入办公电话", trigger: "blur" },
    {
      pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
      message: "请输入正确的办公电话号码",
      trigger: "blur"
    }
  ],
  subjectId: [
    { required: true, message: "请选择科学一级学科", trigger: "change" }
  ],
  eduDegree: [
    { required: true, message: "请选择最后学位", trigger: "change" }
  ],
  eduLevel: [
    { required: true, message: "请选择最后学历", trigger: "change" }
  ],
  subjectClassId: [
    { required: true, message: "请选择统计", trigger: "change" }
  ],
  researchField: [
    { required: true, message: "请输入研究方向", trigger: "blur" }
  ]
});

// 提交新增校外专家表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.honorTitleId = ruleForm.honorTitleId.join(",");
      insertExpertList(ruleForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: res.data
          });
          deleteChildList.value.fathergeilist();
          dialogFormVisible.value = false;
        } else {
          ElMessage({
            type: "info",
            message: res.msg
          });
        }
      });
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 重置表单字段
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
.title-flex {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.dialog-flex {
  display: flex;
}

.dialog-flex > div {
  width: 50%;
}

.edit_fei {
  :deep(.el-transfer-panel) {
    width: 40% !important;
  }
}
</style>    